<template>
  <div class="login-container">
    <h2>系统登录</h2>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="username">用户名</label>
        <input id="username" v-model="form.username" type="text" placeholder="请输入用户名" required>
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input id="password" type="password" placeholder="请输入密码" required>
      </div>
      <div class="form-group">
        <label for="role">选择身份</label>
        <select id="role" v-model="form.role" required>
          <option value="" disabled>请选择身份</option>
          <option value="student">学生</option>
          <option value="teacher">老师</option>
          <option value="admin">管理员</option>
        </select>
      </div>
      <button type="submit" class="login-btn">登录</button>
    </form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/useUser'

const userStore = useUserStore()
const router = useRouter()

//通过useUserStore()将用户登录信息存储在store中
const form = reactive({
  username: '',
  role: ''
})


function handleLogin() {
  //将用户信息通过Pinia存储在本地存储
  userStore.setUserInfo(form)

  // 模拟登录成功，在实际项目中，这里应该是调用API进行登录验证，并处理登录成功或失败的情况，成功才进行路由跳转

  // 登录成功后跳转到首页
  router.push('/')
}

</script>

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 50px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input,
select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.login-btn {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
